window.onload = function () {
    var goodsMenu = document.getElementById("goods_menu");
    var item = goodsMenu.getElementsByTagName("li");
    var asideMenu = document.getElementsByClassName("goods_menu_detail");
    for (var i = 0; i < item.length; i++) {
        item[i].id = i;
        asideMenu[i].id = i;
        item[i].onmouseover = function () {
            for (var j = 0; j < asideMenu.length; j++) {
                asideMenu[j].style.display = "none";
            }
            asideLocation(this.id, goodsMenu, item, asideMenu);
        };
    }

    for (var i = 0; i < asideMenu.length; i++) {
        item[i].onmouseout = function (event) {
            var x=event.clientX;  
            var y = event.clientY;
            var divx1 = asideMenu[this.id].offsetLeft;
            var divy1 = asideMenu[this.id].offsetTop;
            var divx2 = asideMenu[this.id].offsetLeft + asideMenu[this.id].offsetWidth;
            var divy2 = asideMenu[this.id].offsetTop + asideMenu[this.id].offsetHeight;
            console.log(x,y,divx1,divy1,divx2,divy2);
            if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
                for (var j = 0; j < asideMenu.length; j++) {
                    asideMenu[j].style.display = "none";
                }
            }
        };
        asideMenu[i].onmouseleave = function () {
            flag = 0;
            for (var j = 0; j < asideMenu.length; j++) {
                asideMenu[j].style.display = "none";
            }
        };
    }
}



function asideLocation(id, goodsMenu, item, asideMenu) {
    var itemHeight = item[0].offsetHeight;
    var goodsMenuLeft = goodsMenu.offsetLeft;
    var goodsMenuTop = goodsMenu.offsetTop;
    var goodsMenuWidth = goodsMenu.offsetWidth;
    var top = goodsMenuTop + itemHeight * id - 2;
    var left = goodsMenuLeft + goodsMenuWidth-1;
    asideMenu[id].style.cssText = "top:" + top + "px;left:" + left + "px;display: block";
}